<template>
  <div class="vc-h-full vc-w-full vc-flex vc-flex-row vc-items-stretch vc-relative">
    <div class="vc-flex-1 vc-overflow-hidden">
      <Configuration
        ref="configurationIns"
        :comp-data="compData"
        :data="data"
        @load-comp-data="onLoadCompData"
        @select="selectItem"
      />
    </div>
    <div
      class="
        vc-z-50
        vc-p-2
        vc-overflow-auto
        vc-absolute
        vc-top-0
        vc-bottom-0
        vc-right-0
        vc-border-l
        vc-border-solid
        vc-border-gray-300
        vc-bg-white
      "
      :class="{ 'vc-hidden': !operVisible }"
    >
      <h2 class="vc-mb-2 vc-text-xl vc-text-center">模拟数据</h2>
      <div v-for="(val, key) in data" :key="key" class="vc-mb-2">
        <label class="vc-inline-block vc-mr-2">{{ key }}</label>
        <input
          :value="val"
          type="text"
          readonly
          class="vc-px-2 vc-py-1 vc-border vc-border-gray-400 vc-border-solid vc-rounded w-20 vc-bg-gray-50"
        />
      </div>
      <div class="vc-text-center">
        <span class="vc-block vc-mb-2 vc-text-gray-500 vc-text-sm">5秒刷新一次</span>
        <button class="vc-btn" @click="reloadData">立即刷新</button>
      </div>
      <!--  -->
      <h2 class="vc-mt-4 vc-mb-2 vc-text-xl vc-text-center">联动条件</h2>
      <div v-for="(conditions, key) in ConditionInfo" :key="key">
        <div class="vc-text-lg vc-font-semibold">{{ key }}</div>
        <div v-for="el in conditions" :key="el.id" class="vc-py-2">
          <span v-if="el.min !== null" class="vc-text-xs">{{ el.min }} &lt;= </span>
          <span class="vc-text-sm vc-text-blue-600 vc-font-semibold">{{ el.dataKey }}</span>
          <span v-if="el.max !== null" class="vc-text-xs"> &lt;= {{ el.max }}</span>
          <div class="vc-w-44 vc-text-sm">
            {{ JSON.stringify(el.labelCssProps) }}
            {{ JSON.stringify(el.valueCssProps) }}
          </div>
        </div>
      </div>
    </div>
    <div class="vc-absolute vc-bottom-0 vc-right-0" :class="{ 'vc-hidden': operVisible }">
      <button class="vc-btn" @click="operVisible = true">oper</button>
    </div>
    <div
      v-show="operVisible"
      class="vc-absolute vc-inset-0 vc-z-10 vc-bg-black vc-bg-opacity-20"
      @click="operVisible = false"
    ></div>
  </div>
</template>
<script lang="ts" setup>
import { onBeforeUnmount, onMounted, Ref, ref, watch } from "vue";
// import "../lib/style.css";
// import Configuration from "../lib/VueConfiguration.es.js";
import Configuration from "../src";
import type { ConfigurationExpose, Condition } from "../src";
import compData from "../src/assets/data/example4.json";

const keys = ref<string[]>([]);
const data = ref<any>({});
function getRandom(min: number, max: number) {
  let r = Math.random() * (max - min);
  let re = Math.round(r + min);
  re = Math.max(Math.min(re, max), min);
  return re;
}
function createRandomData(keys: string[]) {
  const data = {};
  let value: number;
  keys.forEach((key) => {
    const arr = key.split("-");
    if (arr.length > 1) {
      let midValue = +arr[1];
      let target = Math.round(midValue / 10);
      if (target < 10) {
        target = 3;
      }
      value = getRandom(midValue - target, midValue + target);
    } else {
      value = getRandom(100, 200);
    }
    data[key] = value;
  });
  return data;
}
let inter: number | undefined = void 0;
function reloadData() {
  data.value = createRandomData(keys.value);
  startInter();
}
function startInter() {
  clearInterval(inter);
  inter = setInterval(() => {
    reloadData();
  }, 5000);
}
onBeforeUnmount(() => {
  clearInterval(inter);
});
const configurationIns = ref<ConfigurationExpose>();
const ConditionInfo = ref<{ [name: string]: Condition[] }>({});
function onLoadCompData() {
  if (configurationIns.value) {
    ConditionInfo.value = configurationIns.value.getCompConditionInfo();
    keys.value = configurationIns.value.getLabelValueKeys();
    reloadData();
  }
}

const operVisible = ref(false);
function selectItem(e) {
  console.log(e);
}
</script>
<style>
html,
body,
#app {
  height: 100%;
}
</style>
